<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/mist-list/mist-list.html">
<link rel="import" href="teams/member-page.html">
<dom-module id="page-members">
    <template>
        <style include="shared-styles">
        [hidden] {
            display: none !important;
        }
        </style>
        <app-route route="{{route}}" pattern="/:member" data="{{data}}"></app-route>
        <template is="dom-if" if="[[_isListActive(route.path)]]" restamp>
            <mist-list selectable resizable column-menu multi-sort items="[[model.membersArray]]" selected-items="{{selectedItems}}" frozen=[[_getFrozenColumn()]] visible=[[_getVisibleColumns()]]>
                <p slot="no-items-found">No members found.</p>
            </mist-list>
        </template>
        <member-page model="[[model]]" params="[[data]]" section="[[model.sections.teams]]" resource-id="[[data.member]]" hidden$=[[_isListActive(route.path)]]></member-page>
    </template>
    <script>
    Polymer({

        is: 'page-members',

        properties: {
            model: {
                type: Object
            },
            data: {
                type: Object
            },
            selectedItems: {
                type: Array
            }
        },
        listeners: {
            'action-finished': 'clearListSelection'
        },
        clearListSelection: function() {
            this.set('selectedItems', []);
        },
        _isListActive: function(path) {
            return !path;
        },
        _getVisibleColumns: function() {
            return ['name']
        },

        _getFrozenColumn: function() {
            return ['email']
        },
    });
    </script>
</dom-module>